<template>
  <div>
    <Modal
      v-model="modals"
      width="1000"
      scrollable
      closable
      :title="titleFrom"
      :mask-closable="false"
      :z-index="1"
      @on-cancel="handleReset"
	  @on-confirm="handleSubmit"
      @on-visible-change="visible"
    >
      <Form ref="formValidate" :model="formValidate" :label-width="110" :rules="ruleValidate" @submit.native.prevent>
		  <div class="container" style="display: flex;flex-direction: column;">
			  <p class="title" style="font-weight: bold; text-align: center;font-size: 32px;padding-bottom: 20px;">门诊病历</p>
			  <div class="header" style="display: flex;flex-direction: column;border-bottom:  2px solid lightgray;padding-bottom: 10px;">
				  <div class="section" style="display: flex;flex-direction: row;justify-content: space-around;padding: 5px 0px;">
					  <div class="row1" style="flex:1;font-size: 14px;">姓名：{{formValidate.username}}</div>
					  <div class="row2" style="flex:1;font-size: 14px;" v-if="formValidate.sex == 1">性别：男</div>
					  <div class="row2" style="flex:1;font-size: 14px;" v-else-if="formValidate.sex == 2">性别：女</div>
					  <div class="row2" style="flex:1;font-size: 14px;" v-else>性别：其他</div>
					  <div class="row3" style="flex:1;font-size: 14px;">年龄：{{formValidate.age}}岁</div>
				  </div>
				  <div class="section" style="display: flex;flex-direction: row;justify-content: space-around;padding: 5px 0px;">
					  <div class="row1" style="flex:1;font-size: 14px;">科别：视光门诊</div>
					  <div class="row2" style="flex:1;font-size: 14px;">病历号：{{formValidate.no}}</div>
					  <div class="row3" style="flex:1;font-size: 14px;">日期：{{formValidate.see_time}}</div>
				  </div>
			  </div><!--header end-->
			  <div class="content" style="display: flex;flex-direction: column;margin-top: 10px;">
				  <div class="section" style="display: flex;flex-direction: row;padding: 5px 0px;">
					  <div class="label" style="width: 80px;font-size: 14px;">主诉：</div>
					  <div class="text" style="flex: 1;font-size: 14px;">{{formValidate.main_chinf}}</div>
				  </div>
				  <div class="section" style="display: flex;flex-direction: row;padding: 5px 0px;">
					  <div class="label" style="width: 80px;font-size: 14px;">现病史：</div>
					  <div class="text" style="flex: 1;font-size: 14px;">{{formValidate.hpi}}</div>
				  </div>
				  <div class="section" style="display: flex;flex-direction: row;padding: 5px 0px;">
					  <div class="label" style="width: 80px;font-size: 14px;">既往史：</div>
					  <div class="text" style="flex: 1;font-size: 14px;">{{formValidate.history}}</div>
				  </div>
				  <div class="section" style="display: flex;flex-direction: row;padding: 5px 0px;">
					  <div class="label" style="width: 80px;font-size: 14px;">专科检查：</div>
					  <div class="text" style="flex: 1;font-size: 14px;">{{formValidate.content}}</div>
				  </div>
				  <div class="section" style="display: flex;flex-direction: row;padding: 5px 0px;">
					  <div class="label" style="width: 80px;font-size: 14px;">初步诊断：</div>
					  <div class="text" style="flex: 1;font-size: 14px;">{{formValidate.primary_diagnosis}}</div>
				  </div>
				  <div class="section" style="display: flex;flex-direction: row;padding: 5px 0px;">
					  <div class="label" style="width: 80px;font-size: 14px;">处理意见：</div>
					  <div class="text" style="flex: 1;font-size: 14px;">{{formValidate.handle_advise}}</div>
				  </div>
				  <div class="section" style="display: flex;flex-direction: row;padding: 5px 0px;">
					  <div class="label" style="width: 80px;font-size: 14px;">矫正方案：</div>
					  <div class="text" style="flex: 1;font-size: 14px;">{{formValidate.fa}}</div>
				  </div>
				  <div class="section" style="display: flex;flex-direction: row;padding: 5px 0px;">
					  <div class="label" style="width: 80px;font-size: 14px;">检查次数：</div>
					  <div class="text" style="flex: 1;font-size: 14px;">1</div>
				  </div>
			  </div><!--content end-->
			  <div class="footer" style="display: flex;flex-direction: column;margin-top: 50px;align-items: flex-end;">
				  <div class="section" style="width:300px;text-align: left;padding: 5px 0px;font-size: 16px;">医生签名：</div>
				  <div class="section" style="width:300px;text-align: left;padding: 5px 0px;font-size: 16px;">打印时间：{{time}}</div>
			  </div>
		  </div><!-- container end -->
		  <div style="display: none;">
			  <div class="container" style="display: flex;flex-direction: column;width:495px;padding: 30px;" id="container">
					  <p class="title" style="font-weight: bold; text-align: center;font-size: 32px;padding-bottom: 20px;">门诊病历</p>
					  <div class="header" style="display: flex;flex-direction: column;border-bottom:  2px solid lightgray;padding-bottom: 10px;">
						  <div class="section" style="display: flex;flex-direction: row;justify-content: space-around;padding: 5px 0px;">
							  <div class="row1" style="flex:1;font-size: 20px;">姓名：{{formValidate.username}}</div>
							  <div class="row2" style="flex:1;font-size: 20px;" v-if="formValidate.sex == 1">性别：男</div>
							  <div class="row2" style="flex:1;font-size: 20px;" v-else-if="formValidate.sex == 2">性别：女</div>
							  <div class="row2" style="flex:1;font-size: 20px;" v-else>性别：其他</div>
							  <div class="row3" style="flex:1;font-size: 20px;">年龄：{{formValidate.age}}岁</div>
						  </div>
						  <div class="section" style="display: flex;flex-direction: row;justify-content: space-around;padding: 5px 0px;">
							  <div class="row1" style="flex:1;font-size: 20px;">科别：视光门诊</div>
							  <div class="row2" style="flex:1;font-size: 20px;">病历号：{{formValidate.no}}</div>
							  <div class="row3" style="flex:1;font-size: 20px;">日期：{{formValidate.see_time}}</div>
						  </div>
					  </div><!--header end-->
					  <div class="content" style="display: flex;flex-direction: column;margin-top: 10px;">
						  <div class="section" style="display: flex;flex-direction: row;padding: 5px 0px;">
							  <div class="label" style="width: 80px;font-size: 20px;">主诉：</div>
							  <div class="text" style="flex: 1;font-size: 20px;">{{formValidate.main_chinf}}</div>
						  </div>
						  <div class="section" style="display: flex;flex-direction: row;padding: 5px 0px;">
							  <div class="label" style="width: 80px;font-size: 20px;">现病史：</div>
							  <div class="text" style="flex: 1;font-size: 20px;">{{formValidate.hpi}}</div>
						  </div>
						  <div class="section" style="display: flex;flex-direction: row;padding: 5px 0px;">
							  <div class="label" style="width: 80px;font-size: 20px;">既往史：</div>
							  <div class="text" style="flex: 1;font-size: 20px;">{{formValidate.history}}</div>
						  </div>
						  <div class="section" style="display: flex;flex-direction: row;padding: 5px 0px;">
							  <div class="label" style="width: 80px;font-size: 20px;">专科检查：</div>
							  <div class="text" style="flex: 1;font-size: 20px;">{{formValidate.content}}</div>
						  </div>
						  <div class="section" style="display: flex;flex-direction: row;padding: 5px 0px;">
							  <div class="label" style="width: 80px;font-size: 20px;">初步诊断：</div>
							  <div class="text" style="flex: 1;font-size: 20px;">{{formValidate.primary_diagnosis}}</div>
						  </div>
						  <div class="section" style="display: flex;flex-direction: row;padding: 5px 0px;">
							  <div class="label" style="width: 80px;font-size: 20px;">处理意见：</div>
							  <div class="text" style="flex: 1;font-size: 20px;">{{formValidate.handle_advise}}</div>
						  </div>
						  <div class="section" style="display: flex;flex-direction: row;padding: 5px 0px;">
							  <div class="label" style="width: 80px;font-size: 20px;">矫正方案：</div>
							  <div class="text" style="flex: 1;font-size: 20px;">{{formValidate.fa}}</div>
						  </div>
						  <div class="section" style="display: flex;flex-direction: row;padding: 5px 0px;">
							  <div class="label" style="width: 80px;font-size: 20px;">检查次数：</div>
							  <div class="text" style="flex: 1;font-size: 20px;">1</div>
						  </div>
					  </div><!--content end-->
					  <div class="footer" style="display: flex;flex-direction: column;margin-top: 50px;align-items: flex-end;">
						  <div class="section" style="width:250px;text-align: left;padding: 5px 0px;font-size: 20px;">医生签名：</div>
						  <div class="section" style="width:250px;text-align: left;padding: 5px 0px;font-size: 20px;">打印时间：{{time}}</div>
					  </div>
			  </div><!-- container end -->
		  </div>
      </Form>
	  <div slot="footer">
	    <Button @click="cancel()">取消</Button>
	    <Button type="primary" @click="printContent()">打印</Button>
	  </div>
    </Modal>
    
  </div>
</template>

<script>
import { saveApi} from '@/api/medirecord';
import icon from '@/utils/icon';
import { getCookies } from '@/libs/util';
export default {
  name: 'checkResult',
  props: {
    formValidate: {
      type: Object,
      default: null,
    },
    titleFrom: {
      type: String,
      default: '',
    },
  },
  data() {
    return {
      arrs: [],
      searchRule: '',
      iconVal: '',
      grid: {
        xl: 12,
        lg: 12,
        md: 12,
        sm: 24,
        xs: 24,
      },
      modals: false,
      valids: false,
	  time:''
    };
  },
  watch: {
    'formValidate.header': function (n) {
      this.formValidate.is_header = n ? 1 : 0;
    },
    'formValidate.auth_type': function (n) {
      if (n === undefined) {
        n = 1;
      }
      this.authType = n === 1;
    },
    'formValidate.data': function (n) {},
  },
  computed: {
	  
  },
  methods: {
	  cancel(){
		  this.modals = false;
	  },
	  //打印
	  printContent(){
		  let printMe = document.querySelector('#container');
			let printWindow = window.open('', '');
			printWindow.document.write(printMe.innerHTML);
			printWindow.document.close();
			printWindow.focus();
			printWindow.print();
			printWindow.close();
	  },
	  // 获取当前时间
	  getNowTime(isAll){
	      let now = new Date();
	      let year = now.getFullYear(); //获取完整的年份(4位,1970-????)
	      let month = now.getMonth() + 1; //获取当前月份(0-11,0代表1月)
	      let today = now.getDate(); //获取当前日(1-31)
	      let hour = now.getHours(); //获取当前小时数(0-23)
	      let minute = now.getMinutes(); //获取当前分钟数(0-59)
	      let second = now.getSeconds(); //获取当前秒数(0-59)
	      let nowTime = ''
	      //返回年月日时分秒
	      if(isAll){
	      nowTime = year + '-' + this.fillZero(month) + '-' + this.fillZero(today) + ' ' + this.fillZero(hour) + ':' + this.fillZero(minute) + ':' + this.fillZero(second)
	      }else{//返回年月日
	        nowTime = year + '-' + this.fillZero(month) + '-' + this.fillZero(today)
	      }
	      return nowTime
	  },
	            // 给时间补零
	    fillZero(str){
	      var realNum;
	      if (str < 10) {
	          realNum = '0' + str;
	      } else {
	          realNum = str;
	      }
	      return realNum;
	  }
  },
  created() {
    // this.list = this.search;
    // this.getToken();
	this.time = this.getNowTime(true);
  },
};
</script>

<style scoped lang="less">
	.container{
		display: flex;
		flex-direction: column;
		.title{
			font-weight: bold; 
			text-align: center;
			font-size: 32px;
			padding-bottom: 20px;
		}
		.header{
			display: flex;
			flex-direction: column;
			border-bottom:  2px solid lightgray;
			padding-bottom: 10px;
			.section{
				display: flex;
				flex-direction: row;
				justify-content: space-around;
				padding: 5px 0px;
				.row1{
					flex:1;
					font-size: 14px;
				}
				.row2{
					flex:1;
					font-size: 14px;
				}
				.row3{
					flex:1;
					font-size: 14px;
				}
			}
		}// header end
		.content{
			display: flex;
			flex-direction: column;
			margin-top: 10px;
			.section{
				display: flex;
				flex-direction: row;
				padding: 5px 0px;
				.label{
					width: 80px;
					font-size: 14px;
				}
				.text{
					flex: 1;
					font-size: 14px;
				}
			}
		}//content 
	}
	@media print {
	   html {
	     height: auto;
	     /* background-color: #ffffff; */
	     margin: 0px;
	   }
	   body {
	     /* border: solid 1px #ffffff; */
	     /* margin: 10mm 15mm 10mm 15mm; */
	   }
	  }
</style>
